// 像素艺术生成器
class PixelArtGenerator {
    constructor() {
        this.canvas = document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d');
    }
    
    // 生成玩家角色
    generatePlayer() {
        this.canvas.width = 32;
        this.canvas.height = 32;
        this.ctx.clearRect(0, 0, 32, 32);
        
        // 身体
        this.ctx.fillStyle = '#4a90e2';
        this.ctx.fillRect(12, 16, 8, 12);
        
        // 头部
        this.ctx.fillStyle = '#f4a460';
        this.ctx.fillRect(10, 8, 12, 10);
        
        // 眼睛
        this.ctx.fillStyle = '#000';
        this.ctx.fillRect(12, 10, 2, 2);
        this.ctx.fillRect(18, 10, 2, 2);
        
        // 武器
        this.ctx.fillStyle = '#8b4513';
        this.ctx.fillRect(20, 12, 6, 2);
        
        return this.canvas.toDataURL();
    }
    
    // 生成敌人
    generateEnemy(type = 'basic') {
        this.canvas.width = 32;
        this.canvas.height = 32;
        this.ctx.clearRect(0, 0, 32, 32);
        
        switch(type) {
            case 'basic':
                // 基础敌人 - 红色
                this.ctx.fillStyle = '#e74c3c';
                this.ctx.fillRect(8, 12, 16, 16);
                
                // 眼睛
                this.ctx.fillStyle = '#fff';
                this.ctx.fillRect(12, 16, 2, 2);
                this.ctx.fillRect(18, 16, 2, 2);
                break;
                
            case 'fast':
                // 快速敌人 - 橙色
                this.ctx.fillStyle = '#f39c12';
                this.ctx.fillRect(10, 14, 12, 12);
                
                // 眼睛
                this.ctx.fillStyle = '#fff';
                this.ctx.fillRect(13, 17, 2, 2);
                this.ctx.fillRect(17, 17, 2, 2);
                break;
                
            case 'tank':
                // 坦克敌人 - 深红色
                this.ctx.fillStyle = '#8b0000';
                this.ctx.fillRect(6, 10, 20, 20);
                
                // 装甲
                this.ctx.fillStyle = '#696969';
                this.ctx.fillRect(8, 12, 16, 16);
                break;
        }
        
        return this.canvas.toDataURL();
    }
    
    // 创建渐变色填充
    createRadialGradient(x, y, radius, colors) {
        const gradient = this.ctx.createRadialGradient(x, y, 0, x, y, radius);
        for (let i = 0; i < colors.length; i++) {
            const stop = i / (colors.length - 1);
            gradient.addColorStop(stop, colors[i]);
        }
        return gradient;
    }
    
    // 生成武器特效
    generateWeaponEffect(type) {
        this.canvas.width = 32;
        this.canvas.height = 32;
        this.ctx.clearRect(0, 0, 32, 32);
        
        switch(type) {
            case 'knife':
                // 飞刀 - 更真实的飞刀效果
                this.ctx.save();
                
                // 设置阴影效果
                this.ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
                this.ctx.shadowBlur = 2;
                this.ctx.shadowOffsetX = 1;
                this.ctx.shadowOffsetY = 1;
                
                // 刀身 (金属色)
                this.ctx.fillStyle = '#c0c0c0';
                this.ctx.beginPath();
                this.ctx.moveTo(24, 16);  // 刀尖
                this.ctx.lineTo(20, 14);  // 刀身上缘
                this.ctx.lineTo(10, 14);  // 刀身与刀柄连接处上缘
                this.ctx.lineTo(8, 16);   // 刀柄中心
                this.ctx.lineTo(10, 18);  // 刀身与刀柄连接处下缘
                this.ctx.lineTo(20, 18);  // 刀身下缘
                this.ctx.closePath();
                this.ctx.fill();
                
                // 刀刃高光
                this.ctx.fillStyle = '#e0e0e0';
                this.ctx.beginPath();
                this.ctx.moveTo(24, 16);
                this.ctx.lineTo(20, 15);
                this.ctx.lineTo(10, 15);
                this.ctx.lineTo(10, 16);
                this.ctx.closePath();
                this.ctx.fill();
                
                // 刀柄 (棕色皮革)
                this.ctx.fillStyle = '#8b4513';
                this.ctx.beginPath();
                this.ctx.moveTo(10, 14);
                this.ctx.lineTo(8, 13);
                this.ctx.lineTo(6, 16);
                this.ctx.lineTo(8, 19);
                this.ctx.lineTo(10, 18);
                this.ctx.closePath();
                this.ctx.fill();
                
                // 刀柄细节
                this.ctx.fillStyle = '#5d2906';
                this.ctx.fillRect(7, 15, 2, 2);
                
                this.ctx.restore();
                break;
                
            case 'fireball':
                // 火球 - 更逼真的火焰效果，带动画感
                this.ctx.save();
                
                // 外层深红色火焰
                this.ctx.fillStyle = this.createRadialGradient(16, 16, 14, [
                    'rgba(255, 69, 0, 0.8)',
                    'rgba(255, 69, 0, 0.4)',
                    'rgba(255, 69, 0, 0)'
                ]);
                this.ctx.beginPath();
                this.ctx.arc(16, 16, 14, 0, Math.PI * 2);
                this.ctx.fill();
                
                // 中层橙色火焰
                this.ctx.fillStyle = this.createRadialGradient(16, 16, 10, [
                    'rgba(255, 140, 0, 0.9)',
                    'rgba(255, 140, 0, 0.5)',
                    'rgba(255, 140, 0, 0)'
                ]);
                this.ctx.beginPath();
                this.ctx.arc(16, 16, 10, 0, Math.PI * 2);
                this.ctx.fill();
                
                // 内层黄色火焰核心
                this.ctx.fillStyle = this.createRadialGradient(16, 16, 6, [
                    'rgba(255, 255, 0, 1)',
                    'rgba(255, 215, 0, 0.7)',
                    'rgba(255, 215, 0, 0)'
                ]);
                this.ctx.beginPath();
                this.ctx.arc(16, 16, 6, 0, Math.PI * 2);
                this.ctx.fill();
                
                // 火焰高光
                this.ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
                this.ctx.beginPath();
                this.ctx.arc(14, 14, 3, 0, Math.PI * 2);
                this.ctx.fill();
                
                // 火焰边缘效果
                this.ctx.strokeStyle = 'rgba(255, 69, 0, 0.7)';
                this.ctx.lineWidth = 2;
                this.ctx.beginPath();
                this.ctx.arc(16, 16, 12, 0, Math.PI * 2);
                this.ctx.stroke();
                
                this.ctx.restore();
                break;
                
            case 'lightning':
                // 闪电 - 更复杂的电弧效果
                this.ctx.save();
                
                // 闪电光晕
                this.ctx.fillStyle = 'rgba(0, 255, 255, 0.3)';
                this.ctx.beginPath();
                this.ctx.arc(16, 16, 15, 0, Math.PI * 2);
                this.ctx.fill();
                
                // 主闪电
                this.ctx.strokeStyle = '#00ffff';
                this.ctx.lineWidth = 3;
                this.ctx.lineCap = 'round';
                this.ctx.lineJoin = 'round';
                
                this.ctx.beginPath();
                this.ctx.moveTo(10, 8);
                this.ctx.lineTo(14, 14);
                this.ctx.lineTo(12, 14);
                this.ctx.lineTo(18, 24);
                this.ctx.lineTo(16, 18);
                this.ctx.lineTo(20, 18);
                this.ctx.stroke();
                
                // 次级闪电
                this.ctx.strokeStyle = '#80ffff';
                this.ctx.lineWidth = 2;
                this.ctx.beginPath();
                this.ctx.moveTo(12, 10);
                this.ctx.lineTo(15, 15);
                this.ctx.lineTo(13, 15);
                this.ctx.lineTo(17, 22);
                this.ctx.stroke();
                
                // 闪电核心
                this.ctx.strokeStyle = '#ffffff';
                this.ctx.lineWidth = 1;
                this.ctx.beginPath();
                this.ctx.moveTo(14, 14);
                this.ctx.lineTo(12, 14);
                this.ctx.lineTo(18, 24);
                this.ctx.stroke();
                
                // 电弧效果
                for (let i = 0; i < 5; i++) {
                    const angle = Math.random() * Math.PI * 2;
                    const length = 5 + Math.random() * 10;
                    const startX = 16 + Math.cos(angle) * 5;
                    const startY = 16 + Math.sin(angle) * 5;
                    const endX = startX + Math.cos(angle) * length;
                    const endY = startY + Math.sin(angle) * length;
                    
                    this.ctx.strokeStyle = `rgba(0, 255, 255, ${0.3 + Math.random() * 0.4})`;
                    this.ctx.lineWidth = 1 + Math.random() * 2;
                    this.ctx.beginPath();
                    this.ctx.moveTo(startX, startY);
                    this.ctx.lineTo(endX, endY);
                    this.ctx.stroke();
                }
                
                this.ctx.restore();
                break;
                
            case 'ice':
                // 冰锥
                this.ctx.fillStyle = '#87ceeb';
                this.ctx.beginPath();
                this.ctx.moveTo(16, 4);
                this.ctx.lineTo(20, 16);
                this.ctx.lineTo(16, 28);
                this.ctx.lineTo(12, 16);
                this.ctx.closePath();
                this.ctx.fill();
                break;
                
            case 'laser':
                // 激光
                this.ctx.fillStyle = '#ff1493';
                this.ctx.fillRect(14, 0, 4, 32);
                break;
                
            case 'orbital':
                // 环绕弹
                this.ctx.fillStyle = '#00ff00';
                this.ctx.beginPath();
                this.ctx.arc(16, 16, 6, 0, Math.PI * 2);
                this.ctx.fill();
                break;
                
            case 'shield':
                // 护盾
                this.ctx.strokeStyle = '#4169e1';
                this.ctx.lineWidth = 2;
                this.ctx.beginPath();
                this.ctx.arc(16, 16, 12, 0, Math.PI * 2);
                this.ctx.stroke();
                break;
        }
        
        return this.canvas.toDataURL();
    }
    
    // 生成道具
    generateItem(type) {
        this.canvas.width = 24;
        this.canvas.height = 24;
        this.ctx.clearRect(0, 0, 24, 24);
        
        switch(type) {
            case 'health':
                // 生命道具
                this.ctx.fillStyle = '#ff0000';
                this.ctx.beginPath();
                this.ctx.moveTo(12, 4);
                this.ctx.lineTo(16, 8);
                this.ctx.lineTo(20, 8);
                this.ctx.lineTo(20, 12);
                this.ctx.lineTo(16, 16);
                this.ctx.lineTo(12, 20);
                this.ctx.lineTo(8, 16);
                this.ctx.lineTo(4, 12);
                this.ctx.lineTo(4, 8);
                this.ctx.lineTo(8, 8);
                this.ctx.closePath();
                this.ctx.fill();
                break;
                
            case 'experience':
                // 经验道具
                this.ctx.fillStyle = '#ffff00';
                this.ctx.beginPath();
                this.ctx.arc(12, 12, 8, 0, Math.PI * 2);
                this.ctx.fill();
                break;
        }
        
        return this.canvas.toDataURL();
    }
    
    // 生成UI元素
    generateUI(type) {
        this.canvas.width = 64;
        this.canvas.height = 32;
        this.ctx.clearRect(0, 0, 64, 32);
        
        switch(type) {
            case 'button':
                // 按钮
                this.ctx.fillStyle = '#4a4a4a';
                this.ctx.fillRect(0, 0, 64, 32);
                
                this.ctx.fillStyle = '#696969';
                this.ctx.fillRect(2, 2, 60, 28);
                
                this.ctx.fillStyle = '#fff';
                this.ctx.font = '12px Arial';
                this.ctx.textAlign = 'center';
                this.ctx.fillText('BUTTON', 32, 20);
                break;
                
            case 'healthBar':
                // 血条
                this.ctx.fillStyle = '#333';
                this.ctx.fillRect(0, 0, 64, 8);
                
                this.ctx.fillStyle = '#ff0000';
                this.ctx.fillRect(2, 2, 60, 4);
                break;
        }
        
        return this.canvas.toDataURL();
    }
}

// 全局像素艺术生成器
window.pixelArtGenerator = new PixelArtGenerator(); 